<template>
    <div class="man-list">
        <div class="add">
            <!--添加商品-->
            名称：<input type="text" v-model="name">
            价格：<input type="number" v-model="price">
            <button @click="add">添加</button>
        </div>
        <div class="table">
            <div >
                <span class="name">名称</span>
                <span class="price">价格</span>
                <span class="caozuo">操作</span>
            </div>
            <div v-for="(i,index) in spList" :key="index">
                <span class="name">{{i.name}}</span>
                <span class="price">{{i.price}}</span>
                <span class="caozuo"><button @click="xiugai(i,index)">修改价格</button></span>
            </div>
        </div>
        <div style="height: 40px;line-height: 40px;border: lightblue 1px solid" v-if="isChangePrice">
            <!--改价格-->
            <span style="display: inline-block;margin-right: 15px">名称：{{changeItem.name}}</span>
            <span style="display: inline-block;margin-right: 15px">旧价格：{{changeItem.price}}</span>
            <span style="display: inline-block;margin-right: 15px">新价格：<input type="number" v-model="changeItem.newPrice"></span>

            <button @click="commit">添加</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'formUse',
        data(){
            return {
                name:'',
                price:0,
                changeItem:{
                    name:'',
                    price:0,
                    newPrice:0,
                    index:0
                },
                isChangePrice:false
            }
        },
        methods:{
            add(){
                this.$store.commit('payCar/addSP',{
                    name:this.name,
                    price:this.price
                })
            },
            xiugai(i,index){
                this.changeItem={
                    name:i.name,
                    price:i.price,
                    index:index,
                    newPrice:0
                }
                this.isChangePrice=true
            },
            commit(){
                this.$store.commit('payCar/changePrice',{
                    index:this.changeItem.index,
                    newPrice:this.changeItem.newPrice,
                    name:this.changeItem.name,
                })

                this.isChangePrice=false
            }
        },
        computed:{
            spList(){
                return this.$store.state.payCar.spList
            },


        },

        mounted() {


        }
    }
</script>

<style>
    .man-list{
        font-size: 18px;
    }
    .man-list .add{
        margin: 10px;
    }
    .man-list .add button{
        margin-left: 10px;
    }
    .man-list .table div{
        margin-top: 10px;
    }
    .man-list .table div span{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        text-align: center;
    }
    .man-list .table div .name{
        width: 200px;
    }
    .man-list .table div .price,.caozuo{
        width: 120px;
    }

</style>
